<template>
  <section>
    <div class="top-main">
      <div class="available">
        <label class="lab-style">可用余额：</label>
        <span class="available-num">9999</span>
        <el-button type="primary"
                   @click="showWithdrawalForm">提现</el-button>
      </div>
      <el-button type="primary">比例设置</el-button>
    </div>
    <div class="data-container scroll-table">
      <div class="ind-title lh50 f16">提现流水记录</div>
      <el-table :data="tableData">
        <el-table-column prop="name"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="tel"
                         label="联系电话">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提现申请"
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               ref="form"
               :rules="rule"
               size='small'
               label-width="120px">

        <el-form-item label="支付宝账号:"
                      prop="account">
          <el-col :span="5"
                  class="type-style">
            <el-select v-model="form.type"
                       placeholder="请选择账号类型">
              <el-option label="电话号码"
                         value="1"></el-option>
              <el-option label="电子邮箱"
                         value="2"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8"
                  :offset='1'>
            <el-input v-model="form.account"
                      placeholder="请输入支付宝账号"
                      auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="提现金额:"
                      prop="money">
          <el-input v-model="form.money"
                    auto-complete="off"
                    type="number"
                    placeholder="请输入提现金额"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="form.info"
                    type="textarea"
                    maxlength="50"
                    show-word-limit
                    auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary"
                   @click="confimExamine()">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  name: 'set',
  data () {
    var emilValidate = (rule, value, callback) => {
      console.log(value, this.form.type);
      if (this.form.type == null && this.form.type == undefined) {
        callback(new Error('请选择账号类型'))
      } else {
        if (this.form.type == 1) {
          var tel = /^0\d{2,3}-?\d{7,8}$/;
          var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
          if (value.length == 11) {//手机号码
            if (phone.test(value)) {
              callback();
            }
          } else if (value.length == 13 && value.indexOf("-") != -1) {//电话号码
            if (tel.test(value)) {
              callback();
            }
          }
        } else if (this.form.type == 2) {
          var emil = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
          if (emil.test(value)) {
            callback();
          }
        }

        callback('请输入正确的支付宝账号！');
      }
    };
    return {
      form: {},
      rule: {
        "account": [
          { required: true, message: '请输入支付宝账号', trigger: 'blur' },
          { validator: emilValidate, trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      tableData: [{
        name: '张三',
        tel: '15528105238'
      }]
    }
  },
  methods: {
    showWithdrawalForm () {
      this.dialogFormVisible = true;
    },
  }
}
</script>
<style lang="scss" scoped>
.top-main {
  display: flex;
  justify-content: space-between;
}
.available {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin-right: 30px;
  .lab-style {
    font-size: 20px;
  }
  .available-num {
    margin-right: 30px;
    font-size: 30px;
    color: red;
  }
}
</style>